<!-- 收货地址列表 -->
<script setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 数据
const data = reactive({
  index: 1,
  showDeleteModal: false
})
// 前往新增收货地址页面
function goAddAddressPage() {
  uni.navigateTo({
    url: '/subPackage/my/address/add'
  })
}
// 前往修改收货地址页面
function goEditAddressPage() {
  uni.navigateTo({
    url: '/subPackage/my/address/edit'
  })
}
// 删除地址弹窗显示
function deleteAddress() {
  data.showDeleteModal = true
}
// 删除地址确认
function deleteAddressConfirm() {
  uni.showToast({
    title: '删除成功',
    icon: 'none'
  })

  data.showDeleteModal = false
}
</script>

<template>
  <view class="address-page">

    <!-- 空状态 -->
    <view v-if="true" style="padding-top: 200rpx;">
      <up-empty mode="address" text="暂无收货地址"></up-empty>
    </view>
    <!-- 收货地址列表 -->
    <view class="address-list">

      <up-radio-group v-model="data.index" placement="column" inactiveColor="#666666" activeColor="#FFC870">
        <view class="item" v-for="item in []" :key="item">
          <view class="cnt-box">
            <view class="user-info">
              <view class="name">
                <text class="label">收件人：</text>
                <text class="value">张三</text>
              </view>
              <text class="phone-no">13275692915</text>
            </view>
            <view class="address-info">
              <text>江苏省南京市六合区雄州街道王桥路59号雨庭广场六合科创中心一层102室</text>
            </view>
          </view>
          <view class="control-box">
            <up-radio label="设为默认地址" :name="item">
            </up-radio>
            <view class="right">
              <view class="edit-box" @click="goEditAddressPage">
                <up-icon name="edit-pen" color="#9B9B9B"></up-icon>
                <text>编辑</text>
              </view>
              <view class="delete-box" @click="deleteAddress">
                <up-icon name="trash" color="#9B9B9B"></up-icon>
                <text>删除</text>
              </view>
            </view>
          </view>
        </view>
      </up-radio-group>
    </view>
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content">
        <up-button text="添加地址" type="primary" :disabled="false" shape="circle" @click="goAddAddressPage"></up-button>
      </view>
    </view>
    <!-- 删除地址确认弹窗 -->
    <up-modal :show="data.showDeleteModal" width="540rpx" title="提示" content='确定删除此地址吗？' confirmText="狠心删除"
      cancelText="再想想" :showCancelButton="true" cancelColor="#333333" confirmColor="#FF4D4D" :asyncClose="true"
      contentTextAlign="center" @cancel="data.showDeleteModal = false" @confirm="deleteAddressConfirm"></up-modal>
  </view>
</template>

<style lang="scss" scoped>
.address-page {
  box-sizing: border-box;
  padding-bottom: 182rpx;
  min-height: 100vh;
  background-color: #F9F9F9;

  & .address-list {
    padding-bottom: 20rpx;

    & .item {
      margin-top: 16rpx;
      padding: 32rpx;
      padding-bottom: 24rpx;
      background: #FFFFFF;

      // 地址主要信息
      & .cnt-box {

        // 收货人信息
        & .user-info {
          display: flex;
          align-items: center;
          justify-content: space-between;

          // 收件人名字
          & .name {
            & .label {
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }

            & .value {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }
          }

          // 手机号
          & .phone-no {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }
        }

        // 收货地址
        & .address-info {
          margin-top: 16rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #9B9B9B;
        }
      }

      // 操作 设为默认 编辑 删除等
      & .control-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 48rpx;

        // 设为默认
        &::v-deep .u-radio {
          &__text {
            font-weight: 400;
            font-size: 24rpx !important;
            color: #9B9B9B !important;
          }
        }

        // 右侧
        & .right {
          display: flex;
          align-items: center;

          & .edit-box {
            display: flex;
            align-items: center;

            &::v-deep .u-icon {
              margin-right: 8rpx;
            }

            & text {
              font-weight: 400;
              font-size: 24rpx;
              color: #9B9B9B;
            }
          }

          & .delete-box {
            display: flex;
            align-items: center;
            margin-left: 32rpx;

            &::v-deep .u-icon {
              margin-right: 8rpx;
            }

            & text {
              font-weight: 400;
              font-size: 24rpx;
              color: #9B9B9B;
            }
          }
        }
      }
    }
  }

  // 底部栏
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #E9E9EB;

    &::v-deep .content {
      box-sizing: border-box;
      padding: 12rpx 40rpx;

      & .u-button {
        height: 88rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        background: #FFA618;
        border-radius: 112rpx;
        border: none;
      }
    }
  }
}
</style>